<template>
  <div>
    <Main type="form">
      <el-form ref="form" label-width="130px" :model="form">
        <Title :title="'线上商城'" />

        <el-form-item>
          <el-checkbox v-model="form.checkLista">仅限会员下单</el-checkbox>
          &nbsp;&nbsp;&nbsp;
          <span>开启后非会员下单需要先领卡</span>

          <el-button type="text" @click="shipcard">会员卡设置</el-button>
          <el-button type="text" class="btsample"
            >预览
            <div class="sample">
              <img
                src="http://oss.ztwlxx.cn/socrt.png"
                width="100%"
                height="100%"
              />
            </div>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.checkListb">上传身份照片</el-checkbox>
          &nbsp;&nbsp;&nbsp;
          <span>开启后海淘商品下单身份证照片为必填项</span>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.checkListc">身份证实名认证</el-checkbox>
          &nbsp;&nbsp;&nbsp;
          <span>开启后海淘商品下单买家填写的姓名和身份证必须一致</span>
          &nbsp;&nbsp;&nbsp;
          <!-- <span>剩余校验次数：0</span> -->
        </el-form-item>
      </el-form>
    </Main>
    <Footer>
      <el-button type="primary" @click="submit">保 存</el-button>
    </Footer>
  </div>
</template>
<script>
import { ORDERSET } from "../../service";
export default {
  data() {
    return {
      picture: false,
      form: {
        checkLista: false,
        checkListb: false,
        checkListc: false
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    shipcard() {
      window.open("cardList", "_blank");
    },
    async getList() {
      await ORDERSET({}).then(({ code, data }) => {
        if (code === 200) {
          this.form.checkLista = data.only_vip === 1;
          this.form.checkListb = data.is_cardid === 1;
          this.form.checkListc = data.is_truename === 1;
        }
      });
    },
    async submit() {
      //  this.$refs["form"].validate(valid => {

      await ORDERSET({
        flag: "save",
        only_vip: this.form.checkLista ? 1 : 0,
        is_cardid: this.form.checkListb ? 1 : 0,
        is_truename: this.form.checkListc ? 1 : 0
      }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "设置成功",
            type: "success"
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.btsample {
  position: relative;
  .sample {
    position: absolute;
    display: none;
    width: 300px;
    height: 400px;
    border: 2px solid gainsboro;
    border-radius: 10px;
    overflow: hidden;
    top: -80px;
    z-index: 9;
  }
  &:hover {
    .sample {
      display: inline-block;
    }
  }
}
</style>
